<template>
	<view class="pagebox">
		<view class="card pd30 mb30" v-if="[0,1,2].includes(obj.verify.verify)">
			<view class="bg" :style="{background: obj.vColors[obj.verify.verify],opacity:0.1}"></view>
			<view style="z-index: 2;">
				<view v-if="[0,1,2].includes(obj.verify.verify)" class="verify" :style="{color:obj.vColors[obj.verify.verify]}">{{obj.verify.verify==0?'审核中...':(obj.verify.verify==1?'审核通过':'审核拒绝')}}</view>
				<view v-if="[1,2].includes(obj.verify.verify)&&obj.verify.verify_msg" class="verify_msg">审核内容：{{obj.verify.verify_msg}}</view>
				<view v-if="[1,2].includes(obj.verify.verify)&&obj.verify.verify_time" class="verify_time">审核时间：{{obj.verify.verify_time}}</view>
			</view>
		</view>
		<view class="card pd30 mb30">
			<view class="flex-row-center">
				<image src="../static/18.png" mode="aspectFill" class="labelicon"></image>
				<text class="label">您的业务</text>
			</view>
			<view class="desc">方便为您精确匹配询价和报价信息</view>
			<view class="w100 flex-row wrap">
				<view :class="['type_identitys','flex-center',v.id==obj.f.type_identity?'type_active':'']" v-for="(v,i) in obj.type_identitys" :key="i" @click="selChange('type_identity',v)">{{v.text}}</view>
			</view>
		</view>
		
		<view class="card pd30">
			<view class="flex-row-center">
				<image src="../static/10.png" mode="aspectFill" class="labelicon"></image>
				<text class="label">您的身份</text>
			</view>
			<view class="desc">方便为您提供更加专业的服务</view>
			<view class="w100 flex-row wrap">
				<view :class="['type_identitys','flex-center',v.id==obj.f.type_user?'type_active':'']" v-for="(v,i) in obj.type_users" :key="i" @click="selChange('type_user',v)">{{v.text}}</view>
			</view>
			<view class="inputbox flex-row">
				<view class="inputlabel require">真实姓名</view>
				<input class="flex1" type="text" v-model="obj.f.name" :disabled="[0,1].includes(obj.verify.verify)" maxlength="15" placeholder="填写您的真实姓名（限15字）" />
			</view>
			<view v-if="obj.f.type_user==2" class="inputbox flex-row-center">
				<view class="inputlabel require">企业名称</view>
				<input class="flex1" type="text" v-model="obj.f.company" :disabled="[0,1].includes(obj.verify.verify)" maxlength="50" placeholder="填写您的企业名称" />
				<image class="selicon" src="../static/27.png" mode="aspectFill" @click="obj.showCompany=true"></image>
			</view>
			<view class="inputbox flex-row">
				<view class="inputlabel require">联系地址</view>
				<input class="flex1" type="text" v-model="obj.f.address" :disabled="[0,1].includes(obj.verify.verify)" maxlength="50" placeholder="填写您的联系地址" />
			</view>
			<!-- <view v-if="obj.f.type_user==2" class="inputbox flex-row">
				<view class="inputlabel require">联系方式</view>
				<input class="flex1" type="number" v-model="obj.f.mobile" maxlength="11" placeholder="填写您的企业电话" />
			</view> -->
		</view>
		
		<template v-if="obj.f.type_user==2">
			<view class="card pd30 mb30">
				<view class="flex-row-center">
					<image src="../static/10.png" mode="aspectFill" class="labelicon"></image>
					<text class="label">身份证明</text>
				</view>
				<view class="desc">请提供你与企业的关系证明</view>
				<view class="mb10">企业营业执照（必填）</view>
				<view class="upcard flex-center mb40" @click="choose('business_license')">
					<image v-if="!obj.f.business_license" src="../static/1.png" mode="aspectFit" class="w90 h90"></image>
					<image v-else :src="obj.isup.business_license?`${proxy.$c.uploadfileHost}/${obj.f.business_license}`:`${proxy.$c.fileHost}user/${obj.f.business_license}`" mode="aspectFill" class="w100 h100"></image>
				</view>
				<view class="mb10">个人名片（选填）</view>
				<view class="upcard flex-center mb40" @click="choose('business_card')">
					<image v-if="!obj.f.business_card" src="../static/2.png" mode="aspectFit" class="w90 h90"></image>
					<image v-else :src="obj.isup.business_card?`${proxy.$c.uploadfileHost}/${obj.f.business_card}`:`${proxy.$c.fileHost}user/${obj.f.business_card}`" mode="aspectFill" class="w100 h100"></image>
				</view>
				<view class="mb10">其他可证明与企业关系的材料（选填）</view>
				<view class="upcard flex-center mb40" @click="choose('business_other')">
					<image v-if="!obj.f.business_other" src="../static/3.png" mode="aspectFit" class="w90 h90"></image>
					<image v-else :src="obj.isup.business_other?`${proxy.$c.uploadfileHost}/${obj.f.business_other}`:`${proxy.$c.fileHost}user/${obj.f.business_other}`" mode="aspectFill" class="w100 h100"></image>
				</view>
				<view style="color: red;">注：员工工牌、企业出具的证明都可为材料</view>
			</view>
		</template>
			
		<view class="pd30">
			<button v-if="!([0,1].includes(obj.verify.verify))" class="button base-bg w-color" :disabled="disabled" @click="submit">提交申请</button>
			<button v-else class="button base-bg w-color"  @click="back">{{obj.islogin?'去首页':'返回'}}</button>
		</view>
		
		<view class="selbox" v-if="obj.showCompany" @click="obj.showCompany=false">
			<view class="selcontent">
				<view class="serbox flex-row-center mb20">
					<input type="text" v-model="obj.company" placeholder="请输入企业名称" @input.stop="getCompanys" @click.stop="()=>{}" />
				</view>
				<view class="flex1 overflow-y">
					<view :class="['company',v.company_id==obj.f.company_id?'companyact':'']" v-for="(v,i) in obj.companys" :key="i" @click.stop="chooseCompany(v)">{{v.name}}</view>
				</view>
				<view v-if="!obj.companys.length" class="nodata">暂无企业信息</view>
			</view>
		</view>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted } from 'vue'
	import { onLoad,onShow,onTabItemTap,onReachBottom,onPullDownRefresh,onPageScroll } from '@dcloudio/uni-app';
    let { proxy } = getCurrentInstance()
	
	let obj = reactive({
		f: {
			"type_identity": "",
			"type_user": "",
			"name": "",
			"company": "",
			"address": "",
			"location": "",
			"business_license": "",
			"business_card": "",
			"business_other": ""
		},
		isup: {
			business_license: false,
			business_card: false,
			business_other: false
		},
		type_identitys: [
			{id: '采购', text: '采购'},{id: '销售', text: '销售'},{id: '采购,销售', text: '以上都是'}
		],
		type_users: [
			{id: '2', text: '企业'},{id: '1', text: '个人'}
		],
		disabled: false,
		companys: [],
		company: '',
		showCompany: false,
		verify: {},
		vColors: ['#f0ad4e','#4cd964','#dd524d'],
		islogin: false
	})
	
	onMounted(()=>{
		getuser()
		getCompanys()
	})
	
	onLoad((opt)=>{
		obj.islogin = !!opt.islogin
	})
	
	const getuser=()=>{
		proxy.$reQuest.post('mp/user/get',{},{token: true},).then(d=>{
			if(d.success){
				obj.f =  {
					"type_identity": d.msg.type_identity||'',
					"type_user": d.msg.type_user||'',
					"name": d.msg.name||'',
					"company": d.msg.company||'',
					"address": d.msg.address||'',
					"location": d.msg.location||'',
					"business_license": d.msg.business_license||'',
					"business_card": d.msg.business_card||'',
					"business_other": d.msg.business_other||''
				}
				obj.verify = {
					verify: d.msg.verify,
					verify_msg: d.msg.verify_msg||'',
					verify_time: d.msg.verify_time||''
				}
			}
		}).catch(err=>{})
	}
	
	const getCompanys=()=>{
		proxy.$reQuest.post('mp/company/list',{key:obj.company},{token: true},).then(res=>{
			if(res.success){
				obj.companys = res.msg.list||[]
			}else{
				obj.companys = []
			}
		}).catch(err=>{obj.companys = []})
	}
	
	const selChange=(key,v)=>{
		if([0,1].includes(obj.verify.verify)){
			return
		}
		obj.f[key] = v.id
	}
	
	const choose=(key)=>{
		if([0,1].includes(obj.verify.verify)){
			return
		}
		uni.chooseImage({
			count: 1,
			success: res => {
				let imgFile = res.tempFilePaths[0]
				uni.showLoading({title: '上传中...'})
				uni.uploadFile({
					url: `${proxy.$c.uploadHost}`,
					filePath: imgFile,
					header: {'Authorization': proxy.$c.getToken()},
					name: 'file',
					formData: {
						maxwidth: 750,
					},
					success: res1 => {
						uni.hideLoading()
						let d = JSON.parse(res1.data);
						obj.f[key] = d.filename
						obj.isup[key] = true
					},
					fail: err=>{
						uni.hideLoading()
					}
				});
			}
		})
	}
	
	const chooseCompany=(v)=>{
		obj.f.company_id = v.company_id
		obj.f.company = v.name
		obj.showCompany = false
	}
	
	const submit=()=>{
		if(!obj.f.type_identity){
			uni.showToast({title: '请选择您的业务！',icon: 'none'})
			return
		}
		if(!obj.f.type_user){
			uni.showToast({title: '请选择您的身份！',icon: 'none'})
			return
		}
		if(!obj.f.name){
			uni.showToast({title: '请填写您的真实姓名！',icon: 'none'})
			return
		}
		if(obj.f.type_user==2&&!obj.f.company){
			uni.showToast({title: '请填写您的企业名称！',icon: 'none'})
			return
		}
		if(!obj.f.address){
			uni.showToast({title: '请填写您的联系地址！',icon: 'none'})
			return
		}
		// if(obj.f.type_user==2&&!obj.f.mobile){
		// 	uni.showToast({title: '请填写您的联系方式！',icon: 'none'})
		// 	return
		// }
		if(obj.f.type_user==2&&!obj.f.business_license){
			uni.showToast({title: '请上传企业营业执照！',icon: 'none'})
			return
		}
		if(obj.f.type_user==2){
			obj.f.company = ''
			obj.f.mobile = ''
			obj.f.business_license = ''
			obj.f.business_card = ''
			obj.f.business_other = ''
		}
		console.log('obj.f',obj.f);
		// return
		obj.disabled = true
		proxy.$reQuest.post('mp/user/authentication',obj.f,{token: true},).then(res=>{
			if(res.success){
				proxy.$c.Toast('提交成功');
				proxy.$c.go_url('/pages/index/index','reLaunch');
			}else{
				obj.disabled = false
				proxy.$c.Toast(res.err);
			}
		}).catch(err=>{obj.disabled = false})
		
	}
	
	const back=()=>{
		if(obj.islogin){
			proxy.$c.go_url('/pages/index/index','reLaunch');
		}else{
			proxy.$c.go_url('','navigateBack',1)
		}
	}
</script>

<style lang="scss" scoped>
.pagebox{
	width: 100vw;height: 100vh;overflow-y: auto;background: #f5f5f5;font-size: 26rpx;
	.card{
		position: relative;
		width: 100vw;background: #fff;margin-bottom: 30rpx;
		.labelicon{width: 30rpx;height: 30rpx;margin-right: 10rpx;}
		.label{font-size: 28rpx;font-weight: bold;}
		.label::after{content: '*';color: red;}
		.desc{font-size: 22rpx;color: #999;margin-left: 40rpx;margin-bottom: 40rpx;}
		.bg{
			position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;
		}
		.verify{font-size: 18px;font-weight: bold;margin-bottom: 10rpx;}
		.verify_msg{font-size: 14px;color: #666;}
		.verify_time{font-size: 12px;color: #999;}
	}
	.type_identitys{
		width: calc(50% - 20rpx);height: 60rpx;border-radius: 10rpx;border: 2rpx solid #AFAFAF;box-sizing: border-box;
		font-size: 26rpx;margin-bottom: 40rpx;
	}
	.type_identitys:nth-child(1){margin-right: 40rpx;}
	.type_identitys:nth-child(2){margin-right: 0;}
	.type_identitys:nth-child(3){width: 100%;}
	.type_active{background: #DAEDFF;border: 2rpx solid #1773E5;color: #1773E5;}
	
	.inputbox{
		padding: 30rpx 0;box-sizing: border-box;border-bottom: solid 1rpx #f0f0f0;
		.require::before{content: '*';color: red;margin-right: 5rpx;}
		.inputlabel{margin-right: 30rpx;}
		input{text-align: right;}
		.selicon{width: 30rpx;height: 30rpx;margin-left: 10rpx;}
	}
	
	.upcard{
		width: 100%;height: 324rpx;overflow: hidden;
		background: linear-gradient( 82deg, #F5F6F8 0%, #F5F6F8 100%);box-shadow: 0rpx 0rpx 9rpx 0rpx #EDF0F5;
		border-radius: 25rpx;border: 1rpx solid #E1E8F8;box-sizing: border-box;
	}
	
	.button{
		width: 100%;height: 100rpx;border-radius: 100rpx;text-align: center;line-height: 100rpx;font-size: 26rpx;
	}
	
	.selbox{
		position: fixed;left: 0;top: 0;z-index: 9999999;width: 100vw;height: 100vh;background: rgba(0,0,0,0.3);
		.selcontent{position: absolute;left: 0;bottom: 0;width: 100vw;min-height: 500rpx;max-height: 80vh;background: #fff; overflow-y: auto;padding: 30rpx;box-sizing: border-box;}
		.serbox{
			width: 100%;height: 80rpx;border-radius: 80rpx;background: #f0f0f0;padding: 0 30rpx;box-sizing: border-box;font-size: 26rpx;
			input{width: 100%;}
		}
		.company{padding: 20rpx 0;font-size: 26rpx;}
		.companyact{color: #1773E5;font-weight: bold;}
		.nodata{width: 100%;height: 500rpx;text-align: center;line-height: 500rpx;font-size: 22rpx;color: #999;}
	}
}
</style>
